﻿@using Database
@{
    ViewBag.Title = "Home";
}



<!-- SLIDER -->
<section id="slider" class="fullheight parallax parallax-4"></section>
@*<section id="mslider1" class="fullheight">
        <img src='/images/mob_banner 1.png' style="width: 100%"/>
    </section>
    <section id="mslider2" class="fullheight">
        <img src='/images/mob_banner 2.png' style="width: 100%"/>
    </section>*@
<!-- /SLIDER -->
<!-- CALLOUT -->
<section class="callout-dark heading-title heading-arrow-bottom" style="z-index:100;">
    <div class="container">
        <div class="text-center">
            <h3 class="size-30">One small village.  Treachery, Deception, Murder.</h3>
            <p>Can you find the werewolves before it's too late?</p>
        </div>

    </div>
</section>
<!-- /CALLOUT -->
<!-- FEATURES -->
@{
    int totalPlayers, totalGroups, totalGames, totalDeaths;
    using (var db = new WWContext())
    {
        var counts = db.GlobalStats.First();
        totalPlayers = counts.TotalPlayers ?? 0;
        totalGroups = counts.TotalGroups ?? 0;
        totalGames = counts.GamesPlayed;
        totalDeaths = counts.PlayersKilled;
    }
}
<section id="features">
    <div class="container">

        <header class="text-center margin-bottom-60">
            <h2>Our Features</h2>
            <p class="lead font-lato">What to expect</p>
            <hr />
        </header>

        <!-- FEATURED BOXES 3 -->
        <div class="row">
            <div class="col-md-3 col-xs-6">
                <div class="text-center">
                    <i class="ico-light ico-lg ico-rounded ico-hover fa fa-users"></i>
                    <h4>Active Community</h4>
                    <p>45.000 daily active users</p>
                </div>
            </div>
            <div class="col-md-3 col-xs-6">
                <div class="text-center">
                    <i class="ico-light ico-lg ico-rounded ico-hover et-chat"></i>
                    <h4>Dedicated Support Team</h4>
                    <p>
                        A team of well trained werewolves is available 24/7 to <a href="https://telegram.me/werewolfsupport" target="_blank">help</a> you out
                    </p>
                </div>
            </div>
            <div class="col-md-3 col-xs-6">
                <div class="text-center">
                    <i class="ico-light ico-lg ico-rounded ico-hover fa fa-github"></i>
                    <h4>Open Source</h4>
                    <p>
                        All source code is available on <a href="https://github.com/parabola949/Werewolf" target="_blank">GitHub</a>
                    </p>
                </div>
            </div>
            <div class="col-md-3 col-xs-6">
                <div class="text-center">
                    <i class="ico-light ico-lg ico-rounded ico-hover et-trophy"></i>
                    <h4>Achievements</h4>
                    <p>That's right. We even have achievements you can earn while playing Werewolf</p>
                </div>
            </div>
        </div>
        <!-- /FEATURED BOXES 3 -->
        <div class="row countTo-md text-center">

            <div class="col-xs-6 col-sm-3">
                <i class="ico-light ico-lg ico-rounded ico-hover fa fa-user"></i>
                <span class="countTo" data-speed="3000">@totalPlayers</span>
                <h5>TOTAL PLAYERS</h5>
            </div>

            <div class="col-xs-6 col-sm-3">
                <i class="ico-light ico-lg ico-rounded ico-hover fa fa-group"></i>
                <span class="countTo" data-speed="3000">@totalGroups</span>
                <h5>TOTAL GROUPS</h5>
            </div>

            <div class="col-xs-6 col-sm-3">
                <i class="ico-light ico-lg ico-rounded ico-hover fa fa-paw"></i>
                <span class="countTo" data-speed="3000">@totalGames</span>
                <h5>GAMES PLAYED</h5>
            </div>

            <div class="col-xs-6 col-sm-3">
                <i class="ico-light ico-lg ico-rounded ico-hover fa fa-bullseye"></i>
                <span class="countTo" data-speed="3000">@totalDeaths</span>
                <h5>PLAYER DEATHS</h5>
            </div>
        </div>
    </div>
</section>

<!-- CALLOUT -->
<div class="alert alert-transparent bordered-bottom nomargin">
    <div class="container">

        <div class="row">

            <div class="col-md-9 col-sm-12">
                <!-- left text -->
                <h3>Add <span><strong>@@werewolfbot</strong></span> to your group and start playing!</h3>
                <p class="font-lato weight-300 size-20 nomargin-bottom">
                    It's time to learn who your friends really are
                </p>
            </div><!-- /left text -->


            <div class="col-md-3 col-sm-12 text-right">
                <!-- right btn -->
                <a href="https://telegram.me/werewolfbot?startgroup" rel="nofollow" target="_blank" class="btn btn-primary btn-lg">ADD NOW</a>
            </div><!-- /right btn -->

        </div>

    </div>
</div>
<!-- /CALLOUT -->

<section id="howto">
    <div class="container">
        <div class="row">
            <ul class="nav nav-tabs">
                <li class="active"><a href="#introduction" data-toggle="tab">What is Werewolf?</a></li>
                <li><a href="#faq" data-toggle="tab">FAQ</a></li>
                <li><a href="#groups" data-toggle="tab">Links</a></li>
            </ul>

            <div class="tab-content">
                <div class="tab-pane fade in active" id="introduction">
                    <p>
                        To put it simply, Werewolf is a game of deception. You're goal in the game is to find out who the other players are, and lynch / kill the opposing teams.<br />
                        I need some more content here
                    </p>
                </div>

                <div class="tab-pane fade" id="faq">
                    <div class="col-md-9">
                        <p class="lead">Got questions? Find some answers here!</p>

                        <!-- TOGGLES -->
                        <div class="toggle toggle-transparent toggle-bordered-full margin-top-60">

                            <div class="toggle">
                                <!-- toggle -->
                                <label>How do I add Werewolf to my group?</label>
                                <div class="toggle-content">
                                    <p class="clearfix">
                                        You can add it just like you would add a friend by their usernames (click Add Member and then type @@werewolfIIbot into the search box), or you can go to the bot's profile by clicking its name and click 'Add to group'!
                                    </p>
                                </div>
                            </div><!-- /toggle -->

                            <div class="toggle">
                                <!-- toggle -->
                                <label>How do I configure options for my group, like language / max players / show and hide roles?</label>
                                <div class="toggle-content">
                                    <p class="clearfix">
                                        Simple! First off, you <span>must</span> be an admin in your group. If you are, then in your group simply use the /config command. The bot will PM you a menu
                                    </p>
                                </div>
                            </div><!-- /toggle -->

                            <div class="toggle">
                                <!-- toggle -->
                                <label>What is the difference between the two bots?</label>
                                <div class="toggle-content">
                                    <p class="clearfix">
                                        As far as the code running the bots goes, there is no difference. @@werewolfbot and @@werewolfIIbot are the same. We had to split the game into multiple bots because it got too big, and we began hitting API limits (a bot can only send 30 messages per second)
                                    </p>
                                </div>
                            </div><!-- /toggle -->

                            <div class="toggle">
                                <!-- toggle -->
                                <label>How do I vote to lynch / kill / etc?</label>
                                <div class="toggle-content">
                                    <p class="clearfix">
                                        When the time comes, the bot will PM you a list of players you can take action against.  Simply click the player you want to choose.
                                    </p>
                                </div>
                            </div><!-- /toggle -->

                            <div class="toggle">
                                <!-- toggle -->
                                <label>What is the difference between normal and chaos?</label>
                                <div class="toggle-content">
                                    <p class="clearfix">
                                        In a normal game, roles available to be assigned are chosen based on the number of players, to keep things as balanced as possible.<br /><br />
                                        In a chaos game however, those rules are ignored, and roles are chosen randomly.  However, there are a few checks in place to keep the game somewhat balanced (you won't start a 5 player game with 4 wolves)
                                    </p>
                                </div>
                            </div><!-- /toggle -->
                        </div>
                        <!-- /TOGGLES -->


                    </div>
                </div>

                <div class="tab-pane fade" id="groups">
                    <div class="list-group">
                        <a href="https://telegram.me/werewolfsupport" class="list-group-item">
                            <h4 class="list-group-item-heading">Werewolf Support</h4>
                            <p class="list-group-item-text">If you have further questions, and need assistance, join the support group.  We'll do our best to help you!</p>
                        </a>
                        <a href="https://t.me/joinchat/AAAAAD1l2naRUp0HvOwBhA" class="list-group-item">
                            <h4 class="list-group-item-heading">Werewolf - The Game</h4>
                            <p class="list-group-item-text">This is a very large group (thousands) of players, where you can always find a large game to play (seriously, 35 player chaos games are just that - chaos!)</p>
                        </a>
                        <a href="https://telegram.me/werewolfdev" class="list-group-item">
                            <h4 class="list-group-item-heading">Werewolf Dev Channel</h4>
                            <p class="list-group-item-text">A dedicated channel were the developer of Werewolf posts updates and information</p>
                        </a>
                    </div>
                </div>
            </div>
        </div>
    </div>

</section>
<!-- /FEATURES -->

<section id="status">
    <div class="info-bar info-bar-dark info-bar-bordered">
        <div class="container">
            <h1>Bot Status</h1>
            <div class="row">

                <div class="col-sm-4">

                    <h3>Bot 1 (@@werewolfbot)</h3>
                    <span id="bot1span" class="label label-success"></span>
                </div>

                <div class="col-sm-4">

                    <h3>Beta Bot (@@werewolfbetabot)</h3>
                    <span id="betaspan" class="label label-success"></span>
                </div>

            </div>

        </div>
    </div>
</section>

<section id="roles">
    <div class="container">

        <ul id="portfolio_filter" class="nav nav-pills margin-bottom-60">
            <li class="filter active"><a data-filter="*" href="#">All</a></li>
            <li class="filter"><a data-filter=".village" href="#">Village</a></li>
            <li class="filter"><a data-filter=".evil" href="#">Evil</a></li>
            <li class="filter"><a data-filter=".other" href="#">Other</a></li>
        </ul>

    <!--<div class="portfolio-item TEAM">
            <div class="box-flip box-icon box-icon-center box-icon-round box-icon-large text-center">
                <div class="front">
                    <div class="box1">
                        <div class="box-icon-title">
                            <h2><span>NAME</span></h2>

                        </div>

                    </div>
                </div>
                <div class="back">
                    <div class="box2">
                        <h4>NAME</h4>
                        <hr />
                        <p>Description</p>
                    </div>
                </div>
            </div>
        </div>-->

        <div class="portfolio-item evil">
            <div class="box-flip box-icon box-icon-center box-icon-round box-icon-large text-center">
                <div class="front">
                    <div class="box1">
                        <div class="box-icon-title">
                            <h2><span>ALPHA WOLF</span></h2>

                        </div>

                    </div>
                </div>
                <div class="back">
                    <div class="box2">
                        <h4>ALPHA WOLF</h4>
                        <hr />
                        <p>You are the Alpha Wolf, the origin of the curse, the bane of banes. Every night, there's 20% chance that you will bite your pack's meal, and they will join your ranks instead of dying!</p>
                    </div>
                </div>
            </div>
        </div>

        <div id="portfolio" class="clearfix portfolio-isotope portfolio-isotope-3">
            <div class="portfolio-item village">
                <div class="box-flip box-icon box-icon-center box-icon-round box-icon-large text-center">
                    <div class="front">
                        <div class="box1">
                            <div class="box-icon-title">
                                <h2><span>APPRENTICE SEER</span></h2>
                            </div>

                        </div>
                    </div>
                    <div class="back">
                        <div class="box2">
                            <h4>APPRENTICE SEER</h4>
                            <hr />
                            <p>For now, you are a normal villager. However, if the seer dies, you will become the new seer.</p>
                        </div>
                    </div>
                </div>
            </div>

            <div class="portfolio-item village">
                <div class="box-flip box-icon box-icon-center box-icon-round box-icon-large text-center">
                    <div class="front">
                        <div class="box1">
                            <div class="box-icon-title">
                                <h2><span>BEHOLDER</span></h2>
                            </div>

                        </div>
                    </div>
                    <div class="back">
                        <div class="box2">
                            <h4>BEHOLDER</h4>
                            <hr />
                            <p>As the Beholder, your role is simple - you will always know who the Seer is.</p>
                        </div>
                    </div>
                </div>
            </div>

            <div class="portfolio-item village">
                <div class="box-flip box-icon box-icon-center box-icon-round box-icon-large text-center">
                    <div class="front">
                        <div class="box1">
                            <div class="box-icon-title">
                                <h2><span>BLACKSMITH</span></h2>

                            </div>

                        </div>
                    </div>
                    <div class="back">
                        <div class="box2">
                            <h4>BLACKSMITH</h4>
                            <hr />
                            <p>You are the Blacksmith. Through the years, no blades nor swords gave you as much satisfaction as the Silver Blades the elves ordered. You might have some silverdust left. Who knows ? It might prevent Wolves from eating tonight 🤔</p>
                        </div>
                    </div>
                </div>
            </div>

            <div class="portfolio-item village">
                <div class="box-flip box-icon box-icon-center box-icon-round box-icon-large text-center">
                    <div class="front">
                        <div class="box1">
                            <div class="box-icon-title">
                                <h2><span>CLUMSY GUY</span></h2>

                            </div>

                        </div>
                    </div>
                    <div class="back">
                        <div class="box2">
                            <h4>CLUMSY GUY</h4>
                            <hr />
                            <p>You are the Clumsy Guy. Maybe you should not have had so much alcohol for breakfast. You can't see a damn thing. Can you even vote for the person you want to? (You have a 50% chance to vote for someone random.)</p>
                        </div>
                    </div>
                </div>
            </div>

            <div class="portfolio-item evil">
                <div class="box-flip box-icon box-icon-center box-icon-round box-icon-large text-center">
                    <div class="front">
                        <div class="box1">
                            <div class="box-icon-title">
                                <h2><span>CULTIST</span></h2>

                            </div>

                        </div>
                    </div>
                    <div class="back">
                        <div class="box2">
                            <h4>CULTIST</h4>
                            <hr />
                            <p>As a cultist, it is your goal to convert all other players (except wolves and serial killer) to your cult. If at the end of the game, all living players are cultist - the cult wins</p>
                        </div>
                    </div>
                </div>
            </div>

            <div class="portfolio-item village">
                <div class="box-flip box-icon box-icon-center box-icon-round box-icon-large text-center">
                    <div class="front">
                        <div class="box1">
                            <div class="box-icon-title">
                                <h2><span>CULTIST HUNTER</span></h2>
                            </div>

                        </div>
                    </div>
                    <div class="back">
                        <div class="box2">
                            <h4>CULTIST HUNTER</h4>
                            <hr />
                            <p>Your job is to hunt the Cult. If the cult attacks you, their newest member will die. Each night you may pick a player to 'hunt' - if they are a cultist, they will die.</p>
                        </div>
                    </div>
                </div>
            </div>

            <div class="portfolio-item village">
                <div class="box-flip box-icon box-icon-center box-icon-round box-icon-large text-center">
                    <div class="front">
                        <div class="box1">
                            <div class="box-icon-title">
                                <h2><span>CUPID</span></h2>
                            </div>

                        </div>
                    </div>
                    <div class="back">
                        <div class="box2">
                            <h4>CUPID</h4>
                            <hr />
                            <p>Love is in the air. As Cupid, you will choose two players at the start of the game. These two players will become madly in love! If one of them dies, the other will die of sorrow :( Note: Lovers will know who each other are, but not be told their roles. If the lovers are the last two alive, they win, regardless of teams. If the lovers are on different teams (villager + wolf), and one team wins (wolf), the lover (villager) wins as well. TL;DR if both lovers are alive at the end, and at least one of them was on the winning team, they both win together.</p>
                        </div>
                    </div>
                </div>
            </div>

            <div class="portfolio-item village">
                <div class="box-flip box-icon box-icon-center box-icon-round box-icon-large text-center">
                    <div class="front">
                        <div class="box1">
                            <div class="box-icon-title">
                                <h2><span>CURSED</span></h2>
                            </div>

                        </div>
                    </div>
                    <div class="back">
                        <div class="box2">
                            <h4>CURSED</h4>
                            <hr />
                            <p>As the cursed, you are a normal villager... until the wolves bite you. Once they do, you will become a wolf as well! Free to hunt in the night..... XD</p>
                        </div>
                    </div>
                </div>
            </div>

            <div class="portfolio-item village">
                <div class="box-flip box-icon box-icon-center box-icon-round box-icon-large text-center">
                    <div class="front">
                        <div class="box1">
                            <div class="box-icon-title">
                                <h2><span>DETECTIVE</span></h2>
                            </div>

                        </div>
                    </div>
                    <div class="back">
                        <div class="box2">
                            <h4>DETECTIVE</h4>
                            <hr />
                            <p>You old sleuth.. Each day, you will have the chance to investigate another player. Use this carefully however, for these is a 40% chance the werewolves will detect you!</p>
                        </div>
                    </div>
                </div>
            </div>

            <div class="portfolio-item other">
                <div class="box-flip box-icon box-icon-center box-icon-round box-icon-large text-center">
                    <div class="front">
                        <div class="box1">
                            <div class="box-icon-title">
                                <h2><span>DOPPELGÄNGER</span></h2>
                            </div>

                        </div>
                    </div>
                    <div class="back">
                        <div class="box2">
                            <h4>DOPPELGÄNGER</h4>
                            <hr />
                            <p>Your ancestors had the ability to metamorph into others... while you don't have their full abilities, you can pick a player at the start of the game. If that player dies, you will become what they were. Note: If the player was converted to cult, you will take on their original role. All other normal rules apply: If they were Wild Child and their role model died, you will become a wolf. Otherwise, you will inherit their role model. The cult cannot convert the Doppelgänger (but can after the doppelgänger switches roles). Also - the Doppelgänger can NOT win unless they have transformed. If at the end of the game, the Doppelgänger is still the same, they lose (exception: lover)</p>
                        </div>
                    </div>
                </div>
            </div>

            <div class="portfolio-item village">
                <div class="box-flip box-icon box-icon-center box-icon-round box-icon-large text-center">
                    <div class="front">
                        <div class="box1">
                            <div class="box-icon-title">
                                <h2><span>DRUNK</span></h2>
                            </div>

                        </div>
                    </div>
                    <div class="back">
                        <div class="box2">
                            <h4>DRUNK</h4>
                            <hr />
                            <p>As the drunk, you are still just a villager. BUT! If the wolves kill you, their next kill is disabled, as they are drunk off your insanely high BAC.</p>
                        </div>
                    </div>
                </div>
            </div>

            <div class="portfolio-item village">
                <div class="box-flip box-icon box-icon-center box-icon-round box-icon-large text-center">
                    <div class="front">
                        <div class="box1">
                            <div class="box-icon-title">
                                <h2><span>FOOL</span></h2>
                            </div>

                        </div>
                    </div>
                    <div class="back">
                        <div class="box2">
                            <h4>FOOL</h4>
                            <hr />
                            <p>The Fool is led to believe they are the Seer. Each night, when they choose to reveal a players role, they will be told a completely random role.</p>
                        </div>
                    </div>
                </div>
            </div>

            <div class="portfolio-item village">
                <div class="box-flip box-icon box-icon-center box-icon-round box-icon-large text-center">
                    <div class="front">
                        <div class="box1">
                            <div class="box-icon-title">
                                <h2><span>GUARDIAN ANGEL</span></h2>
                            </div>

                        </div>
                    </div>
                    <div class="back">
                        <div class="box2">
                            <h4>GUARDIAN ANGEL</h4>
                            <hr />
                            <p>You are the Guardian Angel! Each night, you may choose a player to watch over. Be careful however - if you choose to watch over a wolf, there is a 50% chance you will be killed, and if you watch over the serial killer, you will be killed.</p>
                        </div>
                    </div>
                </div>
            </div>
            <div class="portfolio-item village">
                <div class="box-flip box-icon box-icon-center box-icon-round box-icon-large text-center">
                    <div class="front">
                        <div class="box1">
                            <div class="box-icon-title">
                                <h2><span>GUNNER</span></h2>
                            </div>

                        </div>
                    </div>
                    <div class="back">
                        <div class="box2">
                            <h4>GUNNER</h4>
                            <hr />
                            <p>A bit trigger happy are we? As the gunner, you are given 2 silver bullets at the beginning of the game. Each day, you will have the chance to shoot another player. Once you do, everyone will know you are the gunner! Be careful though, you only have 2 bullets!</p>
                        </div>
                    </div>
                </div>
            </div>
            <div class="portfolio-item village">
                <div class="box-flip box-icon box-icon-center box-icon-round box-icon-large text-center">
                    <div class="front">
                        <div class="box1">
                            <div class="box-icon-title">
                                <h2><span>HARLOT</span></h2>
                            </div>
                        </div>
                    </div>
                    <div class="back">
                        <div class="box2">
                            <h4>HARLOT</h4>
                            <hr />
                            <p>As the harlot, you will be given the chance to 'visit' another player each night. If they are not the wolf, you will be told so (because you live!). If you visit a wolf or serial killer, you will be killed. If you visit the player the wolves or serial killer have chosen to kill, you will be killed as well. However - If you are visiting a player, and the wolves choose to kill you, you will survive (you weren't home).</p>
                        </div>
                    </div>

                </div>

            </div>
            <div class="portfolio-item village">
                <div class="box-flip box-icon box-icon-center box-icon-round box-icon-large text-center">
                    <div class="front">
                        <div class="box1">
                            <div class="box-icon-title">
                                <h2><span>HUNTER</span></h2>
                            </div>

                        </div>
                    </div>
                    <div class="back">
                        <div class="box2">
                            <h4>HUNTER</h4>
                            <hr />
                            <p>A trigger happy, vindictive player. As the hunter, you try to keep to yourself. However, when others come to visit you, they may find themselves dead, as your paranoia takes hold and you shoot. If the wolves attack you, you have a chance to take one of them with you. Otherwise, if you die, you will get a chance to shoot someone as you die. Note: For wolf attacks, the chance starts at 30%. If there is one wolf, the hunter has a 30% chance to kill the wolf (and survive). For each additional wolf, add 20% (2 wolves = 50%, 3 = 70%, etc). However - if there are multiple wolves, while you may kill one of them, you will still be outnumbered and killed. If the cult tries to convert you, they have a 50% chance to fail. If they fail, you have a 50% chance to kill one of them!</p>
                        </div>
                    </div>
                </div>
            </div>

            <div class="portfolio-item other">
                <div class="box-flip box-icon box-icon-center box-icon-round box-icon-large text-center">
                    <div class="front">
                        <div class="box1">
                            <div class="box-icon-title">
                                <h2><span>LOVERS</span></h2>
                            </div>

                        </div>
                    </div>
                    <div class="back">
                        <div class="box2">
                            <h4>LOVERS</h4>
                            <hr />
                            <p>The lovers aren't actually a role, but a special designation for two players chosen by cupid. If either of you wins, the other wins. If either of you dies, the other dies. IF you two are the LAST two living players, no matter what teams - the two of you win, everyone else loses, and you get a special ending!</p>
                        </div>
                    </div>
                </div>
            </div>

            <div class="portfolio-item village">
                <div class="box-flip box-icon box-icon-center box-icon-round box-icon-large text-center">
                    <div class="front">
                        <div class="box1">
                            <div class="box-icon-title">
                                <h2><span>MASON</span></h2>
                            </div>

                        </div>
                    </div>
                    <div class="back">
                        <div class="box2">
                            <h4>MASON</h4>
                            <hr />
                            <p>The Masons are a simple role - they know who each other are. If one of the masons is converted by the cult, the other masons will know.</p>
                        </div>
                    </div>
                </div>
            </div>

            <div class="portfolio-item village">
                <div class="box-flip box-icon box-icon-center box-icon-round box-icon-large text-center">
                    <div class="front">
                        <div class="box1">
                            <div class="box-icon-title">
                                <h2><span>MAYOR</span></h2>

                            </div>

                        </div>
                    </div>
                    <div class="back">
                        <div class="box2">
                            <h4>MAYOR</h4>
                            <hr />
                            <p>As mayor, you are a lowly villager, until you reveal yourself. Then you are given twice the vote count for lynching (meaning that your vote is twice as powerful as everyone else's). Use that power wisely to help the Village Team.</p>
                        </div>
                    </div>
                </div>
            </div>

            <div class="portfolio-item village">
                <div class="box-flip box-icon box-icon-center box-icon-round box-icon-large text-center">
                    <div class="front">
                        <div class="box1">
                            <div class="box-icon-title">
                                <h2><span>PRINCE</span></h2>

                            </div>

                        </div>
                    </div>
                    <div class="back">
                        <div class="box2">
                            <h4>PRINCE</h4>
                            <hr />
                            <p>The prince is a key role in the Village Team's strategy. Once the prince gets lynched, their role as Prince is revealed, and they survive. However, this can only happen once: if the village insists on lynching them, they will die.</p>
                        </div>
                    </div>
                </div>
            </div>

            <div class="portfolio-item village">
                <div class="box-flip box-icon box-icon-center box-icon-round box-icon-large text-center">
                    <div class="front">
                        <div class="box1">
                            <div class="box-icon-title">
                                <h2><span>SEER</span></h2>
                            </div>

                        </div>
                    </div>
                    <div class="back">
                        <div class="box2">
                            <h4>SEER</h4>
                            <hr />
                            <p>You are the Seer. In this role, each night, you may choose a player, and have their role revealed to you. Admit to your role wisely: If you reveal you are the seer, the wolves will try to kill you!</p>
                        </div>
                    </div>
                </div>
            </div>

            <div class="portfolio-item evil">
                <div class="box-flip box-icon box-icon-center box-icon-round box-icon-large text-center">
                    <div class="front">
                        <div class="box1">
                            <div class="box-icon-title">
                                <h2><span>SORCERER</span></h2>

                            </div>

                        </div>
                    </div>
                    <div class="back">
                        <div class="box2">
                            <h4>SORCERER</h4>
                            <hr />
                            <p>Do you remember the good old seer? Well now, it has its Wolf Team counterpart. The sorcerer is the Wuff's Seer. They can only see if someone is Wolf or Seer, and they win with the Wolves.</p>
                        </div>
                    </div>
                </div>
            </div>

            <div class="portfolio-item evil">
                <div class="box-flip box-icon box-icon-center box-icon-round box-icon-large text-center">
                    <div class="front">
                        <div class="box1">
                            <div class="box-icon-title">
                                <h2><span>SERIAL KILLER</span></h2>
                            </div>

                        </div>
                    </div>
                    <div class="back">
                        <div class="box2">
                            <h4>SERIAL KILLER</h4>
                            <hr />
                            <p>That asylum was silly anyways. What a joke. You are free now however, back to business as usual - killing! The serial killer is a lone player, on their own team. They can win only if they are the last player alive (exception: lovers). As the serial killer, you can kill ANYONE - wolves, hunters, gunners, guardian angels, whatever. If the wolves try to attack you, there is a 20% chance that you get eaten, but in 80% of cases you will kill one of them (random), and live.</p>
                        </div>
                    </div>
                </div>
            </div>
            <div class="portfolio-item other">
                <div class="box-flip box-icon box-icon-center box-icon-round box-icon-large text-center">
                    <div class="front">
                        <div class="box1">
                            <div class="box-icon-title">
                                <h2><span>TANNER</span></h2>
                            </div>

                        </div>
                    </div>
                    <div class="back">
                        <div class="box2">
                            <h4>TANNER</h4>
                            <hr />
                            <p>The Tanners goal is simple: Get Lynched. If the Tanner gets lynched, he wins, period. Everyone else loses.</p>
                        </div>
                    </div>
                </div>
            </div>
            <div class="portfolio-item village">
                <div class="box-flip box-icon box-icon-center box-icon-round box-icon-large text-center">
                    <div class="front">
                        <div class="box1">
                            <div class="box-icon-title">
                                <h2><span>TRAITOR</span></h2>
                            </div>

                        </div>
                    </div>
                    <div class="back">
                        <div class="box2">
                            <h4>TRAITOR</h4>
                            <hr />
                            <p>You are a traitorous bastard. If you survive long enough for all the wolves to die, you will become a werewolf, ready to kill your former teammates in the night!</p>
                        </div>
                    </div>
                </div>
            </div>
            <div class="portfolio-item village">
                <div class="box-flip box-icon box-icon-center box-icon-round box-icon-large text-center">
                    <div class="front">
                        <div class="box1">
                            <div class="box-icon-title">
                                <h2><span>VILLAGER</span></h2>
                            </div>

                        </div>
                    </div>
                    <div class="back">
                        <div class="box2">
                            <h4>VILLAGER</h4>
                            <hr />
                            <p>You are simply a lowly villager. You have no special abilities. Your only goal is to help your team find the others.</p>
                        </div>
                    </div>
                </div>
            </div>
            <div class="portfolio-item evil">
                <div class="box-flip box-icon box-icon-center box-icon-round box-icon-large text-center">
                    <div class="front">
                        <div class="box1">
                            <div class="box-icon-title">
                                <h2><span>WEREWOLF</span></h2>
                            </div>

                        </div>
                    </div>
                    <div class="back">
                        <div class="box2">
                            <h4>WEREWOLF</h4>
                            <hr />
                            <p>You get to have fun! Each day, you will attempt to deceive your fellow players. However, each night, you will get to pick a player to kill! Note: If you attack the drunk, you yourself will become drunk, and will be unable to attack the next night as you sleep off your hangover! If you attack the cursed, they will become a wolf like yourself! Hooray friends!</p>
                        </div>
                    </div>
                </div>
            </div>
            <div class="portfolio-item village">
                <div class="box-flip box-icon box-icon-center box-icon-round box-icon-large text-center">
                    <div class="front">
                        <div class="box1">
                            <div class="box-icon-title">
                                <h2><span>WILD CHILD</span></h2>
                            </div>

                        </div>
                    </div>
                    <div class="back">
                        <div class="box2">
                            <h4>WILD CHILD</h4>
                            <hr />
                            <p>At the beginning of the game, you will choose someone to be your 'role model'. If they die, you become a werewolf.</p>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <div class="portfolio-item evil">
        <div class="box-flip box-icon box-icon-center box-icon-round box-icon-large text-center">
            <div class="front">
                <div class="box1">
                    <div class="box-icon-title">
                        <h2><span>WOLF CUB</span></h2>

                    </div>

                </div>
            </div>
            <div class="back">
                <div class="box2">
                    <h4>WOLF CUB</h4>
                    <hr />
                    <p>What a cuuuute little wuff. <i>tickles tickles</i> -cough cough- As i was saying, you are the Wolf Cub and you <i>drops the mic</i> -I just can't resist that. I think if anyone killed you, I'd give the wuffs two victims. You're too cute to die. I wouldn't be able to tickle you anymore-</p>
                </div>
            </div>
        </div>
    </div>

</section>



<script>
    //resize portfolio


    var ul = document.getElementById('topMain');
    var li = document.createElement("li");
    var a = document.createElement("a");
    a.textContent = "Features";
    a.setAttribute('href', "#features");
    li.appendChild(a);
    ul.appendChild(li);

    li = document.createElement("li");
    a = document.createElement("a");
    a.textContent = "How To Play";
    a.setAttribute('href', "#howto");
    li.appendChild(a);
    ul.appendChild(li);

    li = document.createElement("li");
    a = document.createElement("a");
    a.textContent = "Roles";
    a.setAttribute('href', "#roles");
    li.appendChild(a);
    ul.appendChild(li);

    //$('#portfolio').isotope({ masonry: { columnWidth: 10 }, itemSelector: '.portfolio-item' });

    /*
    jQuery('.box-flip').each(function() {
                _height1 = jQuery('.box1',this).outerHeight();
                _height2 = jQuery('.box2',this).outerHeight();
console.log(_height1);
console.log(_height2);
                if(_height1 >= _height2) {
                    _height = _height1;
                } else {
                    _height = _height2;
                }

                jQuery(this).css({"min-height":_height+"px"});
                jQuery('.box1',this).css({"min-height":_height+"px"});
                jQuery('.box2',this).css({"min-height":_height+"px"});
            });
    */
    updateStatus = function () {
        $.ajax({
            type: "GET",
            contentType: 'application/json; charset=utf-8',
            dataType: 'json',

            url: '/Home/GetBotStatus/',
            error: function (error) {
                //console.log(error);
                //$('#botStatus').html(error);
            },
            success: function (d) {
                console.log(d);
                $.each(d, function (i, s) {
                    var color = 'green';
                    var status = s;
                    switch (s) {
                        case ('Error'):
                            color = 'red';
                            break;
                        case ('Recovering'):
                            color = 'yellow';
                            break;
                        case ('NotReceiving'):
                            if (i !== 2) {
                                status = 'Not Receiving';
                                color = 'orange';
                            } else {
                                status = 'Normal';
                            }
                            break;
                        case ('Updating'):
                            color = 'blue';
                            break;
                    }
                    switch (i) {
                        case 0:
                            $('#bot1span').removeClass();
                            $('#bot1span').addClass('label label-' + color);
                            $('#bot1span').html(status);
                            break;
                        case 1:
                            $('#bot2span').removeClass();
                            $('#bot2span').addClass('label label-' + color);
                            $('#bot2span').html(status);
                            break;
                        case 2:
                            $('#betaspan').removeClass();
                            $('#betaspan').addClass('label label-' + color);
                            $('#betaspan').html(status);
                            break;
                    }
                });
            }
        });
    };

    setInterval(updateStatus, 1000);
</script>


<style>
    @@media only screen and (min-width: 801px) {
        #slider {
            background-image: url('/images/banner.jpg');
            /*display: block;*/
        }

        /*#mslider1 {
            display: none;
        }

        #mslider2 {
            display: none;
        }*/
    }

    @@media only screen and (max-width: 800px) {
        #slider {
            /*background-image: url('/images/mob_banner 1.png');
            width:100%*/
            display: none !important;
        }

        /*#mslider1 {
            display: block;
            padding: 0;
        }

        #mslider2 {
            display: block;
            padding: 0;
        }*/
    }
</style>
